<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ now_cls }}博客专业发展平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .header {
            height: 60px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
            /*内容对齐方式为两边对齐*/
            justify-content: space-between;
        }

        .classes-box {
            margin: 0 20px 10px;
            box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
            display: flex;
            padding: 20px;
        }

        .classes-box li {

            margin-right: 40px;
            color: #555666;
        }

        .classes-box li a {
            display: inline-block;
            line-height: 40px;
            padding: 5px;
            height: 40px;
            border-radius: 8px;
        }

        .nav {
            width: 1200px;
            margin: 20px auto;
        }

        .nav li {
            border-bottom: 2px #fafafa solid;
            padding: 20px;
        }

        .nav li h4:hover {
            color: cornflowerblue;
        }

        .nav li div {
        {#行快标签#} display: inline-block;
        }

        .nav li .left {
            width: 800px;
        }

        .nav li .right img {
            width: 200px;
        }

        .bottom-info {
            text-align: center;
            margin-top: 20px;
            color: #555666;
        }

        .nav li a .left .time-info {
            font-size: 14px;
            color: #555666;
        }
    </style>
</head>

<body>
<div class="header">
    <div class="left">
        {#        <a href="demo/index">首页</a>#}
        {#        url标签 可以直接通过命名路由跳转到指定的页面#}
        <a href="{% url 'index' %}">首页</a>
    </div>

    <div class="right"></div>
</div>

<ul class="classes-box">
    {% for i in classes %}
        <li>
            {#  {% if now_cls == i %}两边要有空格不然会报错      #}
            <a href="/demo/nav/{{ i }}" {% if now_cls == i %} style="background-color:deepskyblue",{% endif %} >{{ i }}</a>
        </li>
    {% endfor %}
</ul>


{# 如果article有数据就是true，没有就是flase #}
{% if articles %}
    <ul class="nav">
        {% comment %}
        <li>
            <a href="https://blog.csdn.net/Stromboli/article/details/142552381?spm=1000.2115.3001.10526&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-1-142552381-null-null.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-classify_tag-1-142552381-null-null.nonecase">
                <div class="left">
                    <h4>【Python】【数据分析】Python 数据分析与可视化：全面指南</h4>
                    <p>本文演示了如何使用 Python 进行数据分析与可视化。关键步骤包括数据处理、分析和可视化。使用pandas进行数据清洗与分析，使用matplotlib和seaborn进行可视化，展示了不同的图表和分析结果。在实际应用中，数据分析与可视化是一个迭代的过程，您可以根据需求不断调整和优化。希望这篇博客能为您提供一个清晰的入门指南，助力您在数据分析与可视化的旅程中不断前行！如果有任何问题或建议，欢迎在评论区讨论！</p>
                </div>
                <div class="right">
                    <img src="https://i-blog.csdnimg.cn/direct/693e9501a2ca4875ae4a1ef7b48b3380.png" alt="">
                </div>
            </a>
        </li>


        <li>
      取articles索引为零的detail值
            <a {{ articles.0.detail }}>
                <div class="left">
                    <h4>{{ articles.0.title }}</h4>
                    <p>{{ articles.0.desc }}</p>
                </div>
                <div class="right">
                    <img src="{{ articles.0.img }}" alt="">
                </div>

            </a>
        </li>
        {% endcomment %}


        {#    循环生成多个li标签#}
        {% for article in articles %}
            {#        forloop.first是否是循环的第一次迭代#}
            {% if forloop.first %}
                <div class="bottom-info">这是第一篇文章</div>
            {% endif %}
            <li>
                {# 获得遍历articles得到的article的detail值 #}
                <a {{ article.detail }}>
                    <div class="left">
                        {#                    forloop.counter是编序号，默认是从1开始，可以forloop.counter0修改从0，想修改反向forloop.revcounter#}
                        {#                    forloop是循环，counter循环是迭代的次数#}
                        <h4>{{ forloop.counter }}、{{ article.title }}</h4>
                        <p>{{ article.desc }}</p>
                        <p class="time-info">发布时间:{{ article.create_time|date:'Y年m月d日H:i:s' }}</p>
                    </div>
                    <div class="right">
                        <img src="{{ article.img }}" alt="">
                    </div>

                </a>
            </li>
            {#        forloop.last是否是循环的最后一次迭代#}
            {% if forloop.last %}
                <div class="bottom-info">这是最后一篇文章</div>
            {% endif %}
        {% endfor %}

    </ul>
{% else %}
    <div class="bottom-info">该分类暂无文章</div>
{% endif %}


{# 多行注释#}
{% comment %}
<p>{{ str1 }}</p>
<p>{{ num }}</p>
{{ articles.0.title }}
<hr>

{#给长变量articles.0.title取短名字a1#}
{% with articles.0.title as a1 %}
{{ a1 }}
{% endwith %}

{#默认的开启过滤拦截自带的css样式#}
{% autoescape off %}
{{ html }}
{% endautoescape %}

{% endcomment %}

</body>
</html>